<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
  <head>
    <title>好友街</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <link rel="stylesheet" type="text/css" href="css/message.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
      // 测试选中的tab的索引值
          var selectIndex = null;
          $(function(){
            showTab(2); 
            refreshFriends();
            //setInterval(refreshFriends, 3000);
          })
         // 刷新好友列表
         function refreshFriends() {
        	$.get("user_UserAction_getFriendsList.htm", null, function(data){
        		var obj = eval("(" + data + ")");
        		if(obj.ret == retStatus.success) {
        			var friends = obj.data.info;
        			var onlineFriends = $("#tab2");
        			var allFriends = $("#tab3");
        			onlineFriends.html("");
        			allFriends.html("");
        		    var onlineHtml = "";
        		    var allHtml = "";
        			for(var i = 0; i < friends.length; i++){
        				var friend = friends[i];
        				if(friend.isonline == onlineStatus.online) {
        					onlineHtml += "<span style=\"display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;\" onclick=\"openChat('" + friend.uid + "')\">" + friend.nick +"</span>";
        				} 
        				allHtml += "<span style=\"display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;\" onclick=\"openChat('" + friend.uid + "')\">" + friend.nick +"</span>";
        			}
        			onlineFriends.html(onlineHtml);
        			allFriends.html(allHtml);
        		} else {
        			alert(obj.msg);
        		}
        	});
         }
         function showTab(index) {
            if(selectIndex != null) {
                $("#tab" + selectIndex).hide();
                $("#li" + selectIndex).css("background-color", "#D7D7D7").css("border-bottom", "1px solid #D7D7D7");
            }
             $("#tab" + index).show();
             $("#li" + index).css("border-bottom", "1px solid #FFFFFF").css("background-color", "#FFFFFF");
             selectIndex = index;
          }
         
         function openChat(chat) {
        	 alert(chat);
         }
      </script>
  </head>
  
  <body>
     <div class="web_im" id="webIM">
      	 <div class="title"><h2>好友</h2></div>
      	 <div class="search"><input type="text" id="name" name="name" value="" tabindex="测试"/></div>
      	 <div class="tabs">
      	    <ul id="tabnav">
      	        <li id="li1"><a href="#" onclick="showTab(1)">最近联系</a></li>
      	        <li id="li2"><a href="#" onclick="showTab(2)">在线好友</a></li>
      	        <li id="li3"><a href="#" onclick="showTab(3)">全部好友</a></li>
      	    </ul> 
      	 </div>
      	 <div class="friends">
      	    <div id="tab1" style="display:none;">
      	        1
      	    </div>
      	    <div id="tab2" style="display:none;">
      	    </div>
      	    <div id="tab3" style="display:none;">
      	    </div>
      	 </div>
      	 <div class="fold">
      	     <img class="fold_img" src="image/fold.png " title="点击折叠"/>
      	 </div>
      </div>

  </body>
</html>
